StaffScripts 
Banner ciclico
 
Autore: Riccardo Data: 15/12/1999 Downloads: 940 Voto: 1/5 Download Prova: Singolo - Multiplo  


Gestore di Banner (rotazione ciclica)



--------------------------------------------------------------------------------
23/11/2003 - Da oggi questo script è disponibile in due versioni: quella originale (che nell'archivio trovate nella cartella "singolo" e per la quale vale quanto detto nella scheda) ed una nuova versione "multiplo" che rendo disponibile da una modifica propostami da un visitatore, Marco Lombardi, qualche giorno fa. 
     Marco aveva necessità di gestire più di un banner ciclico nella stessa pagina (tre per l'esattezza) ed ha pensato bene di modificare lo script introducendo la possibilità di gestire array multipli per l'array "immagini" e per il "links" e già che c'era mantenendo anche un array con dei testi da far apprire al mouseover. 
     Resta quasi immutata la parte esecutiva dello script, cui si aggiungono solo due funzioni per gestire il setTimeout(), mentre la parte degli array è ora così composta: 
immagini = new Array()
	immagini[0]=new Array("link1.gif","link2.gif","link3.gif");
	immagini[1]=new Array("link2.gif","link3.gif","link1.gif");
	immagini[2]=new Array("link3.gif","link1.gif","link2.gif");
	
links = new Array()
	links[0]=new Array("link1.html","link2.html","link3.html");
	links[1]=new Array("link2.html","link3.html","link1.html");
	links[2]=new Array("link3.html","link1.html","link2.html");
	
commenti = new Array()
	commenti[0]=new Array("link 0 1","link 0 2","link 0 3");
	commenti[1]=new Array("link 1 2","link 1 3","link 1 1");
	commenti[2]=new Array("link 2 3","link 2 1","link 2 2");

nome = new Array("LinkImage0","LinkImage1","LinkImage2");

var posizione=0,timer=null;

function Banner()
	{
	(posizione<2)?posizione++:posizione=0;
	for (i=0;i<nome.length;i++)
	{
	banner = new Image(150,50);
	banner.src= immagini[posizione][i];
	document[String(nome[i])].src=banner.src;
	}
	timer=setTimeout('Banner()',1000)
	}

function LinkBanner(n)
	{
	open(links[n][posizione],'NuovaWindow');
	}

function Ferma(l)
	{
	clearTimeout(timer);
	window.status=commenti[l][posizione];
	}

function Parti()
	{
	timer=setTimeout('Banner()',1000);
	}


quelli che prima erano semplici array monodimensionali ("immagini" e "links") ora sono array di array, ed ogni elemento dell'array principale (ogni riga) fa riferimento ad uno dei banner presenti nella pagina; ovviamente nei tre array ogni elemento in ogni posizione corrisponde allo stesso banner, quindi gli array non devono mai essere disallineati, se manca anche un solo elemento da uno degli array che invece è presente negli altri lo script si arresterà segnalando un errore. 
     È presente inoltre un nuovo array "nomi" necessario in questa versione per identificare l'immagine/banner che dovrà essere cambiata, notare che, nel sorgente dello script, il valore degli elementi dell'array "nomi" corrisponde al valore dell'attributo "NAME" delle immagini del banner, e questo ci porta agli unici vincoli da rispettare per poter implementare correttamente lo script: 
   - gli elementi dell'array "nomi" devono essere, in numero, esattamente tanti quanti sono i banner da far girare (tre nell'esempio) e dunque lo stesso dev'essere il numero di array secondari (0 1 2 )dei tre array principali (immagini, links, commenti); 
     - inoltre il numero degli elementi degli array secondari (ancora una volta tre: "link1.gif","link2.gif","link3.gif") dev'essere lo stesso in tutti gli array. 
     La variabile "posizione" fa riferimento al numero di elementi di "nomi" (quindi agli elementi dell'array principale), mentre il ciclo è unico per tutti gli array secondari, quindi per ogni banner è necessario inserire sempre lo stesso numero di elementi. Un gruppo di array fatto in questo modo: 
immagini = new Array()
	immagini[0]=new Array("link1.gif","link2.gif","link3.gif");
	immagini[1]=new Array("link2.gif","link3.gif","link1.gif","link4.gif");
	immagini[2]=new Array("link3.gif","link1.gif","link2.gif");
	
links = new Array()
	links[0]=new Array("link1.html","link2.html","link3.html");
	links[1]=new Array("link2.html","link3.html","link1.html","link4.html");
	links[2]=new Array("link3.html","link1.html","link2.html");
	
commenti = new Array()
	commenti[0]=new Array("link 0 1","link 0 2","link 0 3");
	commenti[1]=new Array("link 1 2","link 1 3","link 1 1","link 1 4");
	commenti[2]=new Array("link 2 3","link 2 1","link 2 2");

nome = new Array("LinkImage0","LinkImage1","LinkImage2");
genererà errori!!! 

     Le altre due funzioni che troviamo in questa nuova versione ("Ferma(l)" e "Parti()") servono la prima a bloccare il timer (quindi il ciclo di cambio dei banner) nel momento in cui il mouse si posiziona su un'immagine ed a visualizzare nella barra di stato il commento associato, mentre la seconda a riprendere il ciclo quando il mouse lascia l'immagine. 
     Queste due funzioni sono opportunamente attivate dagli event-handler sui link associati ai banner: <a href="javascript:LinkBanner(0)" onmouseover="Ferma(0);return true;" onmouseout="Parti()">, qui i parametri passati alla funzione ("0" nell'esempio) corrispondono agli elementi (0 1 2) degli array secondari e dicono allo script, insieme al valore attuale della variabile "posizione", quale commento visualizzare ed eventualmente quale link aprire. 

     Tanto per cambiare uno script veramente semplice che è più difficile da commentare che da implementare, suggerisco caldamente di fare qualche prova aumentando e diminuendo il numero dei banner e dei gruppi di banner per rendersene conto. 
     Ulrima cosa: attenzione all'event-handler nel tag <BODY ... > che qui punta direttamente alla funzione Parti(). 

     Chiudo con i doverosi ringraziamenti a Marco. 

--------------------------------------------------------------------------------

      Per il commento di questo script vedere quanto già scritto per il Banner Casuale, l'unica differenza è che in questo caso le immagini, e di conseguenza i link vengono visualizzate nello stesso ordine con cui sono stati scelti in sede di dichiarazione dell'array. L'unica riga che mi sento di commentare ulteriormente è la seguente: 
(posizione<3)?posizione++:posizione=0;.
      Di fatto non è che una semplificazione della if (condizione) {...} else {...}. Se la condizione prima del ? è vera viene eseguito il comando (o la funzione) a sinistra dei due punti altrimenti viene eseguito quanto a destra. Nel nostro caso il conteggio riprende da 0 se il valore di posizione è 3. 

<SCRIPT Language="Javascript">
<!--
immagini = new Array()
   immagini[0]="link1";
   immagini[1]="link2";
   immagini[2]="link3";
   immagini[3]="link4";

links = new Array()
   links[0]="link1.html";
   links[1]="link2.html";
   links[2]="link3.html";
   links[3]="link4.html";

var posizione=0;

function Banner()
   {
   (posizione<3)?posizione++:posizione=0;
   banner = new Image(150,50);
   banner.src= immagini[posizione]+".gif";
   document.LinkImage.src=banner.src;
   setTimeout('Banner()',1000);
   }

function SeguiBanner()
   {
   open(links[posizione],'NuovaWindow');
   }
// -->
</SCRIPT>
Ricordate di aggiungere l'istruzione onLoad="setTimeout('Banner()',1000)" all'interno del tag <BODY ... > per far partire la rotazione.  
   
http://www.jsdir.com/staffscripts/script012.asp